<!--
 * @Author: luosi 1297957337@qq.com
 * @Date: 2024-11-11 17:19:35
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2024-12-19 10:52:02
 * @FilePath: \sr_system_manager_ui\src\components\DelConfirmModal\index.vue
 * @Description: 删除确认组件
-->
<script setup>
import warnPng from '@/assets/images/warning.png'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  text: {
    type: String,
    default: '删除后无法恢复，是否确认删除？'
  },
  tip: {
    type: String,
    default: ''
  },
  okText: {
    type: String,
    default: '删除'
  },
  okType: {
    type: String, // danger primary
    default: 'danger',
  },
})
const emits = defineEmits(['cancel', 'ok'])
</script>

<template>
  <div class="confirm-modal">
    <el-dialog v-model="props.visible" title="" :show-close="false" align-center width="460"
      :close-on-click-modal="false" @close="emits('close')">
      <div class="flex space-x-[12px] px-[4px] pt-[12px]">
        <el-image :src="warnPng"
          class="w-[24px] h-[24px] shrink-0" />
        <div class="flex flex-col space-y-[16px]">
          <div class="text-[#1D2129] text-[18px] font-medium">{{ props.text }}</div>
          <div v-if="props.tip" class="text-[#86909C] font-medium">{{ props.tip }}</div>
        </div>
      </div>
      <template #footer>
        <div>
          <el-button @click="emits('cancel')">取消</el-button>
          <el-button :type="props.okType" :loading="props.loading" @click="emits('ok')">
            {{ props.okText }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.confirm-modal {
  :deep(.el-dialog__header) {
    display: none;
  }
}
</style>